<div id="app">
    <nz-layout class="layout">
        <!-- 顶部 -->
        <nz-header class="header">
            <div class="wrap">
                <!-- 左侧 -->
                <div class="left">
                    <h1>CloudMusic</h1>
                    <ul nz-menu nzTheme="dark" nzMode="horizontal">
                        <li nz-menu-item>发现</li>
                        <li nz-menu-item>歌单</li>
                    </ul>
                </div>
                <!-- 右侧 -->
                <div class="right">
                    <!-- 搜索框 -->
                    <div class="search">
                        <nz-input-group [nzSuffix]="suffixIconSearch">
                            <input type="text" nz-input placeholder="歌单/歌曲/歌手">
                        </nz-input-group>
                        <ng-template #suffixIconSearch>
                            <i nz-icon type="search"></i>
                        </ng-template>
                    </div>
                    <!-- 会员登录 -->
                    <div class="member">
                        <div class="no-login">
                            <ul nz-menu nzTheme="dark" nzMode="horizontal">
                                <li nz-submenu>
                                    <div title>
                                        <span>登录</span>
                                        <i nz-icon type="down" nzTheme="outline"></i>
                                    </div>
                                    <ul>
                                        <li nz-menu-item>
                                            <i nz-icon type="mobile" nzTheme="outline"></i>
                                            手机登录
                                        </li>
                                        <li nz-menu-item>
                                            <i nz-icon type="user-add" nzTheme="outline"></i>
                                            注册
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </nz-header>

        <!-- 内容 -->
        <nz-content>
            <router-outlet></router-outlet>
        </nz-content>

        <!-- 底部 -->
        <nz-footer class="footer">
            CloutMusic Designed By GinLu with Angular8
        </nz-footer>
    </nz-layout>
</div>